<template>
  <div>
    <h2>{{ list }}</h2>
    <h2>{{ person }}</h2>
    <h2>1</h2>
    <h2>2</h2>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.id }} --- {{ item.name }} ---{{ item.age }}
      </li>
    </ul>
    <table border="1">
      <tr>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
      </tr>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue'
//定义数据 list  person
//v-for:用来循环数据
//v-for="(item,index) in list"
//item:表示数组或对象中的每一项，inde表示索引值  list 数据
let data = reactive({
  list: [
    { id: 1, name: '张三', age: 27 },
    { id: 2, name: '李四', age: 22 },
    { id: 3, name: '王五', age: 23 },
    { id: 4, name: '张六', age: 26 },
    { id: 5, name: '张小三', age: 20 }
  ],
  person: {
    name: '刘德',
    age: 20
  }
})

let { list, person } = toRefs(data)
</script>

<style scoped></style>
